<template>
	<view>
		<!-- 主要内容 -->
		<view class="con" v-for="(item,index) in itemList" :key="index">
			<view class="box">
				<view class="box-title">
					<text>{{item.title}}</text>
				</view>
				<view class="box-right">
					<view class="box-right-item">
						<text
							v-if="item.type == 'text'">{{handleData(item.id) != null ? handleData(item.id):'未设置'}}</text>
						<image @click="changeGroupHead" v-if="item.type == 'img'" :src="handleData(item.id)"></image>
					</view>
					<view class="box-right-set">
						<image :src="goSetImg" @click="goSetById(item.id)"></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 修改弹框 -->
		<my-update-animation :title="animationTitle" :share="isShowAnimation" @display="display"
			@submitText="submitText"></my-update-animation>
	</view>
</template>

<script>
	import {
		itemListData
	} from './set-group-data.js'

	import {
		chooseIamgeFromAlbum
	} from '@/api/uniapp/uni.js'

	import {
		uploadFile
	} from '@/api/http/common.js'

	import {
		queryGroupByHeadInfo,
		updateGroupByHeadInfo
	}
	from '@/api/http/msg/group.js'

	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'

	import {
		updateInfoData
	} from '@/object/msg.js'

	import myUpdateAnimation from '@/components/common/my-update-animation/my-update-animation.vue'

	export default {
		components: {
			myUpdateAnimation
		},
		data() {
			return {
				//主要内容
				itemList: [],
				goSetImg: require('@/static/img/common/goMore.svg'),
				groupId: '',
				userId: uni.getStorageSync('userId'),
				groupInfo: {},
				isShowAnimation: false,
				animationTitle: '',
				//展示需要修改的内容类型（1：修改家族名称；2：修改家族介绍）
				showSetType: ''
			}
		},
		methods: {
			...mapActions('m_chat', ['updateInfo']),
			//1，参数处理
			handleData(id) {
				//家族头像
				if (id == 1) {
					return this.groupInfo.groupHead
				} else if (id == 2) {
					return this.groupInfo.groupName
				} else {
					return this.groupInfo.describe
				}
			},
			//2，获取主要数据
			getDataList() {
				queryGroupByHeadInfo(this.groupId, this.userId).then(res => {
					if (res.data.pubInfo.code !== 0) {
						return uni.$showMsg(res.data.pubInfo.message);
					}
					//console.log(res.data.busInfo)
					this.groupInfo = res.data.busInfo
					//console.log(this.groupInfo)
				})
			},
			//3，更改家族头像
			changeGroupHead() {
				if (this.groupInfo.identity == "1" || this.groupInfo.identity == "2") {
					var that = this
					//从本地选择图片
					chooseIamgeFromAlbum().then(res => {
						//图片上传
						uploadFile(res).then(result => {
							if (result.data.pubInfo.code !== 0) {
								return uni.$showMsg(result.data.pubInfo.message);
							}
							//获取新头像地址
							var newHead = result.data.busInfo
							var newGroupInfo = that.groupInfo
							newGroupInfo.groupHead = newHead
							//修改头像
							updateGroupByHeadInfo(newGroupInfo).then(resultData => {
								if (resultData.data.pubInfo.code !== 0) {
									return uni.$showMsg(resultData.data.pubInfo.message);
								}
								//修改头像成功
								that.groupInfo.groupHead = newHead
								uni.$showMsg('修改成功！');
								//修改vuex中的数据

								var updateData = updateInfoData(that.groupId, 3, 2, newHead)

								that.updateInfo(updateData)
							})
						})
					})
				} else {
					return uni.$showMsg('您没有该权限！');
				}
			},
			//4，设置
			goSetById(id) {
				if (id == 1) {
					return this.changeGroupHead()
				} else if (id == 2) {
					return this.changeGroupName()
				} else {
					return this.changeGroupDescribe()
				}
			},
			//4.1，设置家族昵称
			changeGroupName() {
				if (this.groupInfo.identity == "1" || this.groupInfo.identity == "2") {
					this.animationTitle = '家族名称'
					this.showSetType = '1'
					this.isShowAnimation = true
				} else {
					return uni.$showMsg('您没有该权限！');
				}
			},
			//4.2，设置家族介绍
			changeGroupDescribe() {
				if (this.groupInfo.identity == "1" || this.groupInfo.identity == "2") {
					this.animationTitle = '家族介绍'
					this.showSetType = '2'
					this.isShowAnimation = true
				} else {
					return uni.$showMsg('您没有该权限！');
				}
			},
			display() {
				this.isShowAnimation = false
			},
			//更改提交
			submitText(e) {
				//判断
				if (this.showSetType == '1') {
					this.updateGroupName(e)
				} else {
					this.updateGroupDescribe(e)
				}
			},
			//5，更改昵称
			updateGroupName(text) {
				var newGroupInfo = this.groupInfo
				var that = this
				newGroupInfo.groupName = text
				updateGroupByHeadInfo(newGroupInfo).then(res => {
					if (res.data.pubInfo.code !== 0) {
						return uni.$showMsg(res.data.pubInfo.message);
					}
					//修改家族名称成功
					that.groupInfo.groupName = text
					uni.$showMsg('修改成功！');
					that.display()
					
					//修改vuex
					var updateData = updateInfoData(that.groupId, 3, 1, text)
					that.updateInfo(updateData)
				})
			},
			//6，更改介绍
			updateGroupDescribe(text) {
				var newGroupInfo = this.groupInfo
				var that = this
				newGroupInfo.describe = text
				updateGroupByHeadInfo(newGroupInfo).then(res => {
					if (res.data.pubInfo.code !== 0) {
						return uni.$showMsg(res.data.pubInfo.message);
					}
					//修改家族介绍成功
					that.groupInfo.describe = text
					uni.$showMsg('修改成功！');
					that.display()
				})
			}
		},
		onLoad(e) {
			this.itemList = itemListData
			//console.log(e.groupId)
			this.groupId = e.groupId
			this.getDataList()
		}
	}
</script>

<style lang="scss" scoped>
	.con {
		width: 100%;

		.box {
			width: 92%;
			margin-left: 4%;
			height: 120rpx;
			display: flex;
			justify-content: space-between;

			.box-title {
				line-height: 120rpx;
				font-size: 33rpx;
				font-weight: 600;
				color: rgba(0, 0, 0, 1);
			}

			.box-right {
				display: flex;
				justify-content: right;

				.box-right-item {
					image {
						margin-top: 20rpx;
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}

					text {
						line-height: 120rpx;
						font-size: 28rpx;
						font-weight: 500;
						color: rgba(128, 128, 128, 1);
					}
				}

				.box-right-set {
					image {
						margin-top: 35rpx;
						width: 50rpx;
						height: 50rpx;
					}
				}
			}
		}
	}
</style>
